<template>
	<view>
		<view class="" v-if="store == 0">
			<!-- 10.26 三级联动成功 -->
			<view class="topsj">
				<view class="dir-left-nowrap box sjpicker">
					<picker mode="multiSelector" @columnchange="columnchange" :value="seindex" :range="selist"
						:range-key="'name'" @change="changesxs" class="sjpic">
						<view class="sjpai">
							<image src="/static/image/icon/icon-search.png" class="searimg" mode=""></image>
							{{seindex[0] == -1 ? '请选择您想查看价格的区域' : selist[0][seindex[0]].name + selist[1][seindex[1]].name + selist[2][seindex[2]].name}}
						</view>
					</picker>
					<view class="sjclose" @click="clearsj" v-if="keyword">
						清空
					</view>
					<view class="sjclose" @click="searchsj">搜索</view>
				</view>
			</view>
			<view class="konghei"></view>
			<view class="" v-if="keyword != ''">
				<view class="nowor" v-if="list.length == 0">
					暂无该地区的店铺价格
				</view>
				<view class="beturnstore" v-else v-for="(tes,nes) in list" :key="nes">
					<view class="beturntext">
						{{tes.merger_name}} {{tes.name}}
					</view>
					<view class="beturnprice">
						<view class="">
							双熙堂网上珠宝店
						</view>
						<view class="">
							价格<text class="red">{{tes.params.money}}元</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 11.11 点击查看各个地区的价格 -->
			<view class="allsty" v-else>
				<!-- 省 -->
				<view class="allpro" v-for="(item,index) in province" :key="index" @click="clickp(item,index)">
					<text v-if="!item.isclickc" class="probor">+</text><text v-else class="probor">-</text>
					查看<text class="red area">{{item.name}}</text>珠宝店的价格
					<view class="procity" v-if="item.isclickc" v-for="(citem,cindex) in city" :key="cindex"
						@click.stop="clickc(citem,cindex)">
						<text v-if="!citem.isclicka" class="citybor">+</text><text v-else class="citybor">-</text>
						查看<text class="red area">{{citem.name}}</text>珠宝店的价格
						<view class="cityarea" v-if="citem.isclicka" v-for="(aitem,aindex) in area" :key="aindex"
							@click.stop>
							<!-- {{aitem.name}} -->
							<view class="beturntext">
								{{aitem.name}}
							</view>
							<view class="beturnprice">
								<view class="">
									双熙堂网上珠宝店
								</view>
								<view class="">价格 <text class="red">￥{{aitem.params.money}}</text></view>
							</view>
						</view>
						<view class="morea" v-if="citem.isclicka && apage < apage_count" @click.stop="moreclicka">
							查看更多 本区/县 的价格 ∨
						</view>
					</view>
					<view class="morea" v-if="item.isclickc && cpage < cpage_count" @click.stop="moreclickc">
						查看更多市 ∨
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else-if="store == 1">
			<!-- 12.10 -->
			<view class="allsty">
				<!-- 省 -->
				<view class="allpro" v-for="(item,index) in province" :key="index" @click="clickp(item,index)">
					<text v-if="!item.isclickc" class="probor">+</text><text v-else class="probor">-</text>
					查看<text class="red area">{{item.name}}</text>的实体店
					<view class="procity" v-if="item.isclickc" v-for="(citem,cindex) in city" :key="cindex"
						@click.stop="clickc(citem,cindex)">
						<text v-if="!citem.isclicka" class="citybor">+</text><text v-else class="citybor">-</text>
						查看<text class="red area">{{citem.name}}</text>的实体店
						<view class="proarea" v-if="citem.isclicka" v-for="(aitem,aindex) in area" :key="aindex"
							@click.stop="clicka(aitem,aindex)">
							<text v-if="!aitem.isclicke" class="citybor">+</text><text v-else class="citybor">-</text>
							查看<text class="red area">{{aitem.name}}</text>的实体店
							<view class="cityarea" v-if="aitem.isclicke" v-for="(eitem,eindex) in entstore"
								:key="eindex" @click.stop="toentity(eitem.id)">
								<image class="entity-img" :src="eitem.malloption.option1.cateinfo[0].icon_url"
									mode="widthFix"></image>
								<view class="entity-title">
									<view class="">
										{{eitem.name}}
									</view>
									<view class="">
										{{eitem.address}}
									</view>
								</view>
							</view>
							<view class="morea" v-if="aitem.isclicke && epage < epage_count" @click.stop="moreclicke">
								查看更多 ∨
							</view>
						</view>
						<view class="morea" v-if="citem.isclicka && apage < apage_count" @click.stop="moreclicka">
							查看更多 ∨
						</view>
					</view>
					<view class="morea" v-if="item.isclickc && cpage < cpage_count" @click.stop="moreclickc">
						查看更多 ∨
					</view>
				</view>
			</view>
		</view>
		<!-- 返回顶部 -->
		<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
			<image @click="backTop" class="quick-btn" src="/static/image/icon/back-top.png"></image>
		</view>
	</view>
</template>

<script>
	let allist = []
	let keywords = ''
	export default {
		data() {
			return {
				list: [],
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0,
				keyword: '',

				// 三级联动
				selist: [],
				seindex: [-1, -1, -1],
				curpro: -1,

				// 省市区分开点击查看
				province: [],
				proid: -1,
				city: [],
				citid: -1,
				cpage: 1,
				cpage_count: 1,
				area: [],
				areid: -1,
				apage: 1,
				apage_count: 1,

				// 12.10 实体店城市
				store: 0,
				entid: -1,
				epage: 1,
				epage_count: 1,
				entstore: []
			}
		},
		mounted() {
			this.loadSeList()
		},
		onLoad(options) {
			keywords = ''
			if (options.store) {
				this.store = 1
				uni.setNavigationBarTitle({
					title: '查找城市的实体店',
				});
			}
			this.loadList()
			// 单个单个（只选省再选市再选区）的搜索
			// this.loadSeList()

			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			},
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: '',
				params: {

				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				title: '',
				query: {

				}
			});
		},
		methods: {
			// 三级联动的搜索
			changesxs(e) {
				this.seindex = e.detail.value
				if (this.seindex[0] != -1) {
					keywords = this.selist[2][this.seindex[2]].name
				}
			},
			searchsj() {
				if (keywords != '') {
					this.keyword = keywords
				}
				if (this.keyword == '') {
					return uni.showToast({
						title: '请选择您想查看价格的区域',
						icon: 'none'
					})
				}
				// this.keyword = this.selist[2][this.seindex[2]].name
				this.list = []
				this.loadList(this.keyword)
			},
			clearsj() {
				keywords = ''
				this.keyword = ''
				// this.province = []
				this.seindex = [-1, -1, -1]
				this.selist = [
					allist,
					allist[0].subnav,
					allist[0].subnav[0].subnav,
				]

				// this.loadList()
				this.list = allist
			},
			columnchange(e) {
				if (e.detail.column == 0) {
					// console.log(allist[e.detail.value].subnav);
					this.selist = [
						allist,
						allist[e.detail.value].subnav,
						allist[e.detail.value].subnav[0].subnav,
					]
					this.seindex = [
						e.detail.value,
						0,
						0
					]
					this.curpro = e.detail.value

					keywords = this.selist[2][this.seindex[2]].name
					this.$forceUpdate() // 更新数据
					// this.selist[1] = allist[e.detail.value].subnav
					// this.selist[2] = allist[e.detail.value].subnav[0].subnav
					// console.log(this.selist);
				} else if (e.detail.column == 1) {
					if (this.seindex[0] == -1) {
						this.seindex[0] = 0
						this.seindex = [
							0,
							e.detail.value,
							0
						]
					} else {
						this.selist = [
							allist,
							allist[this.curpro].subnav,
							allist[this.curpro].subnav[e.detail.value].subnav,
						]
						this.seindex = [
							this.curpro,
							e.detail.value,
							0
						]
					}
					keywords = this.selist[2][this.seindex[2]].name
				} else if (e.detail.column == 2) {
					if (this.seindex[0] == -1) {
						this.seindex[0] = 0
						this.seindex = [
							0, 0,
							e.detail.value
						]
					}
					keywords = this.selist[2][this.seindex[2]].name
				}
			},
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			jump(item) {
				uni.navigateTo({
					url: item
				})
			},
			loadList(keyword = '') {
				this.$request({
					url: this.$api.apply.price,
					data: {
						gettree: 1,
						keyword: keyword
					}
				}).then((res) => {
					if (keyword != '') {
						this.list = res.detail.filter(res => {
							return res.params.money != 0
						})
					} else {
						// this.list = res

						allist = res
						this.selist = [
							res,
							res[0].subnav,
							res[0].subnav[0].subnav,
						]
						this.$forceUpdate()
					}
				}).catch(err => {
					console.log(err);
				})
			},
			// 11.11 点击省请求省 点击市请求市 点击请求 类似三级目录
			loadSeList(pid = 0) {
				this.$request({
					url: this.$api.apply.price,
					data: {
						pid: pid,
						limit: 50
					}
				}).then((res) => {
					this.province = res.list
					this.province.filter(item => {
						item.isclickc = false
					})
				}).catch(err => {
					console.log(err);
				})
			},
			clickp(item, index) {
				this.cpage = 1
				this.cpage_count = 1
				this.city = []
				this.area = []
				item.isclickc = !item.isclickc
				this.province.filter(c => {
					if (c.city_id != item.city_id) {
						c.isclickc = false
					}
				})
				if (item.isclickc) {
					this.proid = item.city_id
					this.loadCiList(item.city_id)
				}
				this.$forceUpdate() // 更新数据
			},
			moreclickc() {
				this.cpage++
				this.loadCiList(this.proid)
			},
			loadCiList(pid = 0) {
				this.$request({
					url: this.$api.apply.price,
					data: {
						pid: pid,
						limit: 50,
						page: this.cpage
					}
				}).then((res) => {
					this.cpage_count = res.pagination.page_count
					this.city = this.cpage == 1 ? res.list : this.city.concat(res.list)
					// 11.11
					this.city.filter(item => {
						item.isclicka = false
					})
				}).catch(err => {
					console.log(err);
				})
			},
			clickc(item, index) {
				// item.isclicka = true
				item.isclicka = !item.isclicka
				this.apage = 1
				this.apage_count = 1
				this.area = []
				this.city.filter(a => {
					if (a.city_id != item.city_id) {
						a.isclicka = false
					}
				})
				if (item.isclicka) {
					// this.apage == 1
					this.areid = item.city_id
					this.loadArList(item.city_id)
				}
				this.$forceUpdate() // 更新数据
			},
			moreclicka() {
				this.apage++
				this.loadArList(this.areid)
			},
			loadArList(pid = 0) {
				this.$request({
					url: this.$api.apply.price,
					data: {
						pid: pid,
						limit: 50,
						page: this.apage
					}
				}).then((res) => {
					this.apage_count = res.pagination.page_count
					this.area = this.apage == 1 ? res.list : this.area.concat(res.list)
					this.area.filter(item => {
						item.isclicke = false
					})
				}).catch(err => {
					console.log(err);
				})
			},
			// 12.10 查看实体店
			clicka(item, index) {
				item.isclicke = !item.isclicke
				this.epage = 1
				this.epage_count = 1
				this.area.filter(a => {
					if (a.city_id != item.city_id) {
						a.isclicke = false
					}
				})
				if (item.isclicke) {
					// this.apage == 1
					this.entid = item.city_id
					this.loadenList(item.city_id)
				}
				this.$forceUpdate() // 更新数据
			},
			moreclicke() {
				this.epage++
				this.loadenList(this.entid)
			},
			loadenList(pid = 0) {
				this.$request({
					url: this.$api.entity.list,
					data: {
						limit: 5,
						page: this.epage,
						formdata: {
							// user_id: 0,
							district_id: pid,
							catid: 1
						}
					}
				}).then((res) => {
					this.entstore = res.data.list
				}).catch(err => {
					console.log(err);
				})
			},
			toentity(id) {
				uni.navigateTo({
					url: '/pages/entity/index?mall_id=' + id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	// 双十一 11.11
	.allsty {
		font-size: 28rpx;
		line-height: 64rpx;
		width: 706rpx;
		margin: 0 auto;

		.area {
			font-size: 32rpx;
			padding: 0 12rpx;
		}

		.allpro {}

		.probor {
			margin-right: 12rpx;
		}

		.citybor {
			margin-right: 12rpx;
		}

		.procity {
			text-indent: 1em;
		}

		.cityarea {
			font-size: 28rpx;
			background: #FFFFFF;
			width: 686rpx;
			// height: 128rpx;
			border-radius: 16rpx;
			margin: 20rpx auto;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 48rpx;
		}

		.entity-img {
			width: 120rpx;
		}

		.entity-title {
			font-size: 28rpx;
			text-indent: initial;
			padding-left: 24rpx;
			font-weight: bold;

			& view+view {
				font-size: 24rpx;
				color: #3d3d3d;
			}
		}

		.proarea {
			text-indent: 2em;
		}

		.morea {
			text-align: center;
		}
	}

	// 10.27
	.topsj {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 15;
		padding: #{20rpx} #{24rpx};
		background-color: #fff;
		font-size: 28rpx;
		color: #353535;
	}

	.sjpicker {
		align-items: center;
	}

	.sjpic {
		flex: 1;
	}

	.sjclose {
		border: 1rpx solid #c1c1c1;
		border-radius: 2rpx;
		padding: 6rpx 12rpx;

		&+.sjclose {
			margin-left: 12rpx;
		}
	}

	.sjpai {
		display: flex;
		align-items: center;
	}

	.searimg {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.nowor {
		width: 100%;
		height: 456rpx;
		line-height: 456rpx;
		text-align: center;
		font-size: 28rpz;
	}


	.chanpaa {
		width: 100%;
		height: 660rpx;
	}

	// 10.26 注释的单个单个选择的
	.chaun {
		background-color: #FFFFFF;
		padding: 6rpx 24rpx;
		color: #353535;
		border-radius: 6rpx;

		&+.chaun {
			border-left: 1rpx solid #efeff4;
		}
	}

	.flex {
		flex: 1;
	}

	.top {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 15;
		padding: #{20rpx} #{24rpx};
		background-color: #efeff4;
		// font-size: $uni-font-size-import-two;
		font-size: 28rpx;
		color: $uni-general-color-one;

		.input {
			background-color: #ffffff;
			border-radius: #{50rpx 0 0 50rpx};
			padding: 0 #{32rpx};
			font-size: $uni-font-size-general-one;
			height: #{64rpx};
		}

		.box {
			position: relative;

			.close-tip {
				width: #{64rpx};
				height: #{64rpx};
				background-color: #ffffff;
				border-radius: #{0 50rpx 50rpx 0};
				margin-right: #{20rpx};
			}

			.search-close {
				width: #{32rpx};
				height: #{32rpx};
				border-radius: 50%;
				margin: #{16rpx};
			}
		}

		.radio {
			margin-top: #{32rpx};

			.radio-item {
				padding-bottom: #{12rpx};
			}

			.active {
				border-bottom: #{4rpx} solid;
			}
		}
	}

	.search-area {
		position: fixed;
		z-index: 3;
		top: 0;
		left: 0;
		right: 0;
		height: #{88rpx};
		line-height: #{88rpx};
		width: 100%;
		background-color: #efeff4;
		padding: #{12rpx} #{24rpx};

		.search {
			height: #{64rpx};
			line-height: #{64rpx};
			border-radius: #{32rpx};
			background-color: #fff;
			color: #b2b2b2;
			font-size:#{26rpx};

			&.be-search {
				color: #353535;
				padding-left: 32rpx;

				.icon-search {
					margin-right: 10rpx;
				}
			}

			.icon-search {
				height: #{24rpx};
				width: #{24rpx};
				margin-top: #{20rpx};

				&+text {
					color: #b2b2b2;
					margin:0 #{8rpx};
				}
			}
		}
	}

	.konghei {
		width: 100%;
		height: 100rpx;
	}

	// 小店循环
	.beturnstore {
		background: #FFFFFF;
		width: 686rpx;
		// height: 128rpx;
		border-radius: 16rpx;
		margin: 20rpx auto;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 48rpx;
	}

	.beturnimage {
		// width: 84rpx;
		// height: 84rpx;
		// width: 423rpx;
		border-radius: 50%;
		text-align: center;
	}

	.beturnimage .image {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.beturntext {
		font-size: 28rpx;
		color: #333333;
		// padding-left: 32rpx;
		// overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
		flex: 1;
	}

	.beturnprice {
		font-size: 32rpx;
	}

	.red {
		color: #FF4544;
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}
</style>
